<?php
use yii\helpers\Html;
use yii\helpers\Url;
use common\widgets\JsBlock;
use yii\widgets\ActiveForm;

$this->title = '推荐关系图';
$this->params['breadcrumbs'][] = $this->title;

?>
<?php $this->registerJsFile('@web/js/go-debug.js?v=11.05');?>
<div class="jie-dian-guan-xi">
    <?php $form = ActiveForm::begin(['action'=>'move-team','fieldConfig'=>['template'=>'{input}']]); ?>
    <div class="row">
        <div class="col-md-3">
            <?= $form->field($moveModel, 'username')->textInput(['placeholder'=>'要修改的会员']) ?>
        </div>
        <div class="col-md-3">
            <?= $form->field($moveModel, 'toUsername')->textInput(['placeholder'=>'新推荐人编号']) ?>
        </div>
        <div class="col-md-2">
            <?= Html::submitButton(Yii::t('app', '确认转移'), ['class' => 'btn btn-danger btn-sm', 'onclick'=>'if(!confirm("是否要修改会员推荐人?"))return false;']) ?>
        </div>
    </div>
    <?php ActiveForm::end(); ?>
</div><!-- jie-dian-guan-xi -->
<div class="jie-dian-guan-xi">
    <?php $form = ActiveForm::begin(['fieldConfig'=>['template'=>'{input}']]); ?>
    <div class="row">
        <div class="col-md-3">
            <?= $form->field($model, 'username')->textInput()->label(false) ?>
        </div>
        <div class="col-md-2">
            <?= $form->field($model, 'dai')->dropDownList([2=>'2代', 3=>'3代', 4=>'4代', 5=>'5代', 10=>'10代', 20=>'20代'])->label(false) ?>
        </div>
        <div class="col-md-3">
            <?= Html::submitButton(Yii::t('app', '查找'), ['class' => 'layui-btn']) ?>
            <?php if ($model && $model['pid']):?>
            <a class="layui-btn" href='tj-tree?dai=<?=$model['dai']?>&username=<?= $model['p_username'];?>'>上级</a>
            <a class="layui-btn" href='tj-tree?dai=<?=$model['dai']?>'>顶级</a>
            <?php endif;?>
        </div>
    </div>
    <?php ActiveForm::end(); ?>
</div><!-- jie-dian-guan-xi -->

<div>
    <div id="myDiagramDiv" style="width:100%; height:660px; background-color: #fff"></div>
</div>

<?php JsBlock::begin(); ?>
<script>
function imageConverter(prop, picture) {
    var node = picture.part;
    if (node.isTreeLeaf) {
        return "images/document.svg";
    } else {
        if (node.isTreeExpanded) {
            return "images/openFolder.svg";
        } else {
            return "images/closedFolder.svg";
        }
    }
}
var GO = go.GraphObject.make;
// var myDiagram = GO(go.Diagram, "myDiagramDiv", {
//     //   initialContentAlignment: go.Spot.Center, // 居中显示Diagram内容
//     //   "undoManager.isEnabled": true, // 打开Ctrl-Z撤销和Ctrl-Y重做功能
//         layout: GO(go.TreeLayout, // 1个特殊的树形排列 Diagram.layout布局
//                 { angle: 90, layerSpacing: 35 }),
//         isReadOnly: true, // 只读
//     });
var myDiagram = GO(go.Diagram, "myDiagramDiv",
        {
            initialContentAlignment: go.Spot.TopLeft, // 居中显示
            allowMove: false,
            allowCopy: false,
            allowDelete: false,
            allowHorizontalScroll: true,
            layout:
            GO(go.TreeLayout,
              {
                alignment: go.TreeLayout.AlignmentStart,
                angle: 0,
                compaction: go.TreeLayout.CompactionNone,
                layerSpacing: 16,
                layerSpacingParentOverlap: 1,
                nodeIndentPastParent: 1.0,
                nodeSpacing: 0,
                setsPortSpot: false,
                setsChildPortSpot: false
            })
        }); //构建gojs对象

    // 定义节点模板
    myDiagram.nodeTemplate = GO(go.Node,
        { // no Adornment: instead change panel background color by binding to Node.isSelected
            selectionAdorned: false,
            // a custom function to allow expanding/collapsing on double-click
            // this uses similar logic to a TreeExpanderButton
            doubleClick: function(e, node) {
                var cmd = myDiagram.commandHandler;
                if (node.isTreeExpanded) {
                    if (!cmd.canCollapseTree(node)) return;
                } else {
                    if (!cmd.canExpandTree(node)) return;
                }
                e.handled = true;
                if (node.isTreeExpanded) {
                    cmd.collapseTree(node);
                } else {
                    cmd.expandTree(node);
                }
            },
            click: function(e, node) {
                if (node.data.username) {
                    document.location.href = "tj-tree?dai=<?=$model['dai']?>&username=" + node.data.username;
                }
            }
        },
        GO("TreeExpanderButton",
        {
            "ButtonBorder.fill": "whitesmoke",
            "ButtonBorder.stroke": null,
            "_buttonFillOver": "rgba(0,128,255,0.25)",
            "_buttonStrokeOver": null
        }),
        GO(go.Panel, "Horizontal",
            { position: new go.Point(18, 0) },
            new go.Binding("background", "isSelected", function(s) { return (s ? "lightblue" : "white"); }).ofObject(),
            GO(go.Picture,
            {
                width: 18, height: 18,
                margin: new go.Margin(0, 4, 0, 0),
                imageStretch: go.GraphObject.Uniform,
            },
            // bind the picture source on two properties of the Node
            // to display open folder, closed folder, or document
            new go.Binding("source", "isTreeExpanded", imageConverter).ofObject(),
            new go.Binding("source", "isTreeLeaf", imageConverter).ofObject()),
            GO(go.TextBlock,
                { 
                    font: '9pt Verdana, sans-serif',
                    textAlign: 'left',
                },
                new go.Binding("text", "usernameAndNickname")),
            GO(go.TextBlock,
                { 
                    font: '9pt Verdana, sans-serif',
                    textAlign: 'left',
                    text:' ',
                }),
            GO(go.TextBlock,
                { 
                    font: '9pt Verdana, sans-serif',
                    textAlign: 'left',
                    stroke: '#009bcf',
                },
                new go.Binding("stroke", "color"),
                new go.Binding("text", "msg")),
        )  // end Horizontal Panel
    );  // end Node
    // without lines
    myDiagram.linkTemplate = GO(go.Link);
    // with lines
    myDiagram.linkTemplate =
        GO(go.Link,
          { selectable: false,
           routing: go.Link.Orthogonal,
           fromEndSegmentLength: 4,
           toEndSegmentLength: 4,
           fromSpot: new go.Spot(0.001, 1, 7, 0),
           toSpot: go.Spot.Left },
          GO(go.Shape, { stroke: 'gray', strokeDashArray: [1,2] }));
    // create a tree
    var nodeDataArray = <?= $model->getJsonData();?>;
    myDiagram.model = new go.TreeModel(nodeDataArray);
    // 定义一个直角路由形式的连线模板, 去掉箭头
    // myDiagram.linkTemplate =
    //   GO(go.Link,
    //     { routing: go.Link.Orthogonal, corner: 5 },
    //     GO(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape

</script>
<?php JsBlock::end();?>